<style type="text/css">
    .bg-card-1 {
        background: linear-gradient(-125deg, #22dcfd, #5865b9);
        color: #ffffff;
    }

    .bg-card-2 {
        background: linear-gradient(-125deg, #ed3b4b, #4c3b92);
        color: #ffffff;
    }

    .bg-card-3 {
        background: linear-gradient(-113deg, #ffab96, #ff0f47);
        color: #ffffff;
    }

    .bg-card-4 {
        background: linear-gradient(-141deg, #fbd6e3, #a9ede9);
        color: #ffffff;
    }

    .fzdccard .small-box,
    .panel {
        border-radius: 10px;
    }

    .fzdccard .small-box>.inner {
        padding: 15px 22px;
    }

    .fzdccard .small-box>.inner p:last-child {
        font-size: 12px;
    }

    .fzdccard .small-box p {
        font-size: 14px;
        margin: 10px 0;
    }

    .fzdccard .small-box h3 {
        font-weight: 100;
    }

    .fzdccard .small-box .icon {
        color: rgba(255, 255, 255, 0.16);
        right: 22px;
    }

    .small-box .icon {
        font-size: 80px;
    }

    .panel-statistics h3 {
        font-weight: 500;
        font-size: 14px;
        color: #333;
        margin-top: 9.2px;
    }

    .panel-statistics h4 {
        color: #666;
        font-weight: 400;
        font-size: 14px;
    }

    .panel-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: -9px;
    }

    .fzdcllist .panel-statistics h4 {
        color: #555;
        font-weight: bold;
        font-size: 18px;
    }

    .fzdcllist .panel-statistics thead {
        color: #777777;
    }

    .vertical {
        vertical-align: middle;
    }

    .table>thead>tr>th,
    .table>thead>tr>td,
    .table>tbody>tr>th,
    .table>tbody>tr>td {
        padding: 12px 0;
        font-weight: initial;
    }

    .table>tbody>tr>td:first-child {
        color: #666666;
    }
</style>
<style type="text/css">
    .sm-st {
        background: #fff;
        padding: 20px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        margin-bottom: 20px;
    }

    .sm-st-icon {
        width: 60px;
        height: 60px;
        display: inline-block;
        line-height: 60px;
        text-align: center;
        font-size: 30px;
        background: #eee;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        float: left;
        margin-right: 10px;
        color: #fff;
    }

    .sm-st-info {
        padding-top: 2px;
    }

    .sm-st-info span {
        display: block;
        font-size: 24px;
        font-weight: 600;
    }

    .orange {
        background: #fa8564 !important;
    }

    .tar {
        background: #45cf95 !important;
    }

    .sm-st .green {
        background: #86ba41 !important;
    }

    .pink {
        background: #AC75F0 !important;
    }

    .yellow-b {
        background: #fdd752 !important;
    }

    .stat-elem {

        background-color: #fff;
        padding: 18px;
        border-radius: 40px;

    }

    .stat-info {
        text-align: center;
        background-color: #fff;
        border-radius: 5px;
        margin-top: -5px;
        padding: 8px;
        -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
        font-style: italic;
    }

    .stat-icon {
        text-align: center;
        margin-bottom: 5px;
    }

    .st-red {
        background-color: #F05050;
    }

    .st-green {
        background-color: #27C24C;
    }

    .st-violet {
        background-color: #7266ba;
    }

    .st-blue {
        background-color: #23b7e5;
    }

    .stat-icon {
        color: #28bb9c;
        display: inline-block;
        font-size: 35px;
        text-align: center;
        vertical-align: middle;
        width: 50px;
        float: right;
    }

    .stat {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }

    .stat .value {
        font-size: 20px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
    }

    .stat .name {
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 5px 0;
    }

    .stat.lg .value {
        font-size: 26px;
        line-height: 28px;
    }

    .stat-col {
        margin: 0 0 10px 0;
    }

    .stat.lg .name {
        font-size: 16px;
    }

    .stat-col .progress {
        height: 2px;
    }

    .stat-col .progress-bar {
        line-height: 2px;
        height: 2px;
    }

    .item {
        padding: 30px 0;
    }


    #statistics .panel {
        min-height: 150px;
    }

    #statistics .panel h5 {
        font-size: 14px;
    }
</style>

<div class="row fzdccard">
    <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-card-3">
            <div class="inner">
                <p>用户</p>
                <p>{$totaluser|htmlentities}</p>
                <p>平台注册用户总数</p>
            </div>
            <div class="icon">
                <i class="fa fa-user-circle"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-card-4">
            <div class="inner">
                <p>今日会员</p>
                <p>{$todayusersignup|htmlentities}</p>
                <p>今日新增用户数量</p>
            </div>
            <div class="icon">
                <i class="fa fa-user"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-card-2">
            <div class="inner">
                <p>帖子数量</p>
                <p>{$postNums|htmlentities}</p>
                <p>平台发贴数量</p>
            </div>
            <div class="icon">
                <i class="fa fa-line-chart"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-card-1">
            <div class="inner">
                <p>今日发帖</p>
                <p>{$todaypostNums|htmlentities}</p>
                <p>今日发帖数量</p>
            </div>
            <div class="icon">
                <i class="fa fa-list-alt"></i>
            </div>
        </div>
    </div>
</div>
<!-- 资金 -->
<div class="row">
    <div class="col-xs-12">
        <div class="row">
            <div class="col-xs-3" style="margin-bottom:15px;">
                <div class="panel panel-default panel-intro panel-statistics">
                    <div class="panel-body">
                        <div class="stat-icon"><i class="fa fa-vcard"></i></div>
                        <h3>今日登录用户</h3>
                        <h4>{$todayusersignup|htmlentities}</h4>
                    </div>
                </div>
            </div>
            <div class="col-xs-3" style="margin-bottom:15px;">
                <div class="panel panel-default panel-intro panel-statistics">
                    <div class="panel-body">
                        <div class="stat-icon"><i class="fa fa-calendar"></i></div>
                        <h3>三日新增用户</h3>
                        <h4>{$threednu|htmlentities}</h4>
                    </div>
                </div>
            </div>
            <div class="col-xs-3" style="margin-bottom:15px;">
                <div class="panel panel-default panel-intro panel-statistics">
                    <div class="panel-body">
                        <div class="stat-icon"><i class="fa fa-user-circle"></i></div>
                        <h3>七日活跃用户</h3>
                        <h4>{$sevendau|htmlentities}</h4>
                    </div>
                </div>
            </div>
            <div class="col-xs-3" style="margin-bottom:15px;">
                <div class="panel panel-default panel-intro panel-statistics">
                    <div class="panel-body">
                        <div class="stat-icon"><i class="fa fa-user-circle-o"></i></div>
                        <h3>月活跃用户</h3>
                        <div class="panel-btn">
                            <h4>{$thirtydau|htmlentities}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 百度图标 -->
<div class="row">
    <div class="col-xs-12 col-sm-6">
        <div class="panel">
            <div class="panel-body" style="height:397px;">
                <div id="echart" class="btn-refresh" style="height:380px;width:100%;"></div>
            </div>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body" style="height:397px">
                <h4>Top5 收藏量</h4>
                <table class="table" style="width:100%">
                    <thead>
                        <tr>
                            <th class="text-left">帖子名称</th>
                            <th class="text-right" width="50px">收藏量</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach name="collectTopList" id="item" empty="
                        <tr>
                            <td colspan='2' class='text-center'>暂无数据</td>
                        </tr>
                        "}
                        <tr>
                            <td class="vertical text-left" style="font-size:xx-small;">
                                {$key+1}.{$item.name|htmlentities}
                            </td>
                            <td class="vertical text-right" style="font-size: xx-small;">
                                {$item.sales|htmlentities}
                            </td>
                        </tr>
                        {/foreach}
                    </tbody>
                </table>
            </div>
        </div>

    </div>
    <div class="col-xs-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body" style="height:397px">
                <h4>Top5 用户活跃度</h4>
                <table class="table" style="width:100%">
                    <thead>
                        <tr>
                            <th class="text-left">用户名称</th>
                            <th class="text-right" width="50px">活跃度</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach name="userLoginTopList" id="item" empty="
                        <tr>
                            <td colspan='2' class='text-center'>暂无数据</td>
                        </tr>
                        "}
                        <tr>
                            <td class="vertical text-left" style="font-size:xx-small;">
                                {$item.nickname|htmlentities}
                            </td>
                            <td class="vertical text-right" style="font-size: xx-small;">
                                {$item.maxsuccessions|htmlentities}天
                            </td>
                        </tr>
                        {/foreach}
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
<!-- 列表 -->
<div class="row fzdcllist">

</div>